<template>
    <el-row class="dashboard-editor-container">
        <div class="dashboard-info clearfix">
            <pan-thumb :image="avatar" style="float: left">
            </pan-thumb>
            <div class="info-container">
                <!--                <el-row type="flex">-->
                <!--                    <el-col :span="12" class="">{{ name }}</el-col>-->
                <!--                    <el-col :span="6">-->
                <!--                        <el-tag-->
                <!--                            :type="role | roleTypeFilter"-->
                <!--                        >-->
                <!--                            {{ role | roleNameFilter }}-->
                <!--                        </el-tag>-->
                <!--                    </el-col>-->
                <!--                </el-row>-->
                <span class="display_name">
                    {{ name }}
                    <el-tag :type="role | roleTypeFilter">
                        {{ role | roleNameFilter }}
                    </el-tag>
                </span>
                <span style="font-size:20px;padding-top:20px;display:inline-block;">
                    <router-link to="/profile/index">
                        <el-button round>个人资料<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </router-link>
                </span>
            </div>
        </div>
        <panel-group @handleSetLineChartData="handleSetLineChartData" />
        <h3 class="demonstration">历史月总阅读量</h3>
        <el-row style="margin: 0 0 20px">
            <el-date-picker
                v-model="monthSelect"
                type="monthrange"
                align="left"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                :picker-options="pickerOptions"
                @change="getLineChartData"
            >
            </el-date-picker>
        </el-row>
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
            <line-chart :chart-data="lineChartData" />
        </el-row>
    </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from './components/PanelGroup'
import LineChart from '@/views/home/components/LineChart'
import PanThumb from '@/components/PanThumb/index'
import { getMonthViews } from '@/api/home'

export default {
    name: 'Home',
    components: {
        PanThumb,
        LineChart,
        PanelGroup
    },
    filters: {
        roleTypeFilter(role) {
            const roleMap = {
                0: 'error',
                1: 'info',
                2: 'success'
            }
            return roleMap[role]
        },
        roleNameFilter(role) {
            const roleMap = {
                0: '管理员',
                1: '编辑者',
                2: '教师'
            }
            return roleMap[role]
        }
    },
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now()
                },
                shortcuts: [
                    {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date(new Date().getFullYear(), 0)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '过去六个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setMonth(start.getMonth() - 6)
                            picker.$emit('pick', [start, end])
                        }
                    }]
            },
            monthSelect: [],
            lineChartData: {}
        }
    },
    computed: {
        ...mapGetters([
            'name',
            'avatar',
            'role'
        ])
    },
    created() {
        // 初始化选择框, 为过去六个月
        const end = new Date()
        const start = new Date()
        start.setMonth(start.getMonth() - 6)
        this.monthSelect.push(start)
        this.monthSelect.push(end)

        // 拉取月历史阅读数据
        this.getLineChartData()
    },
    methods: {
        // 该方法已废弃
        handleSetLineChartData(type) {
            // this.lineChartData = lineChartData[type]
        },
        // 获取月份包括头月 不包括尾月
        async getLineChartData() {
            const [startDate, endDate] = this.monthSelect
            const params = {
                startYear: startDate.getFullYear(),
                startMon: startDate.getMonth() + 1,
                endYear: endDate.getFullYear(),
                endMon: endDate.getMonth()
            }

            const { monthReadNum } = await getMonthViews(params)
            this.lineChartData = this.constructChartData(monthReadNum)
        },
        constructChartData(preData) {
            const xAxisData = []
            const data = []
            preData.forEach(v => {
                xAxisData.push(this.dateLabelFormat(v.year, v.month))
                data.push(v.count)
            })
            return { xAxisData, data }
        },
        dateLabelFormat(year, month) {
            month = month >= 10 ? month : '0' + month
            return year + '-' + month
        }

    }
}
</script>

<style lang="scss" scoped>
.demonstration {
    color: #798798;
    font-size: 18px;
    padding-right: 20px;
}
.dashboard-editor-container {
  padding: 32px;
  background-color: #f0f2f596;
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.dashboard-info {
    margin-left: 20px;
    margin-bottom: 40px;
}
.info-container {
    position: relative;
    margin-left: 200px;
    height: 150px;
    line-height: 200px;
    .display_name {
        font-size: 48px;
        line-height: 48px;
        color: #212121;
        position: absolute;
        top: 20px;
        display: inline-flex;
        align-items: flex-end;
        .el-tag{
            margin-left: 25px;
        }
    }
}

</style>
